<template>
  <div class="schedule">
      <div class="header">
          <div class="left" >
                <img class="goback" src="@/assets/goback.png" alt="" @click="go">
            </div>
            <div class="title">
                <span>{{infoList.cinema && infoList.cinema.name}}</span>
            </div>
            <div class="right"></div>
      </div>
      <div class="info">
          <div class="film-name">{{infoList.film && infoList.film.name}}</div>
          <div class="film-des">{{'周'+ new Date(parseInt(infoList.showAt) * 1000).getDay()}} {{new Date(parseInt(infoList.showAt) * 1000).toLocaleString().slice(5,10).replace('/','月') + '日'}} {{((new Date( infoList.showAt * 1000 )).getHours())>9?(new Date( infoList.showAt * 1000 )).getHours():'0' + (new Date( infoList.showAt * 1000 )).getHours()}}:{{(new Date( infoList.showAt * 1000 )).getMinutes()>9 ? (new Date( infoList.showAt * 1000 )).getMinutes() : '0' + (new Date( infoList.showAt * 1000 )).getMinutes()}} {{infoList.film && infoList.film.language}} {{infoList.imagery}}</div>
      </div>
      <div class="setting-wrap">
          <div class="setting-chart" @mousewheel="rollSeat(this)" ref="bigSeat">
              <div class="screen">{{infoList.hall && infoList.hall.name}}</div>
              <div class="set-y-num">
                  <div class="rownum" v-for="(item, index) in setList.height" :key="index">
                      {{item}}
                  </div>
              </div>
              <div class="set-wrap" >
                  <div class="set-item">
                      <ul class="row" v-for="(rows, index1) in setList.height" :key="index1">
                          <li class="col" v-for="(cols, index2) in setList.width" :key="index2">
                              <div v-for="(item, index3) in setList.seats" :key="index3">
                                  <span class="iconfont icon-zuowei" v-if="item.columnNum == index2+1 && item.rowNum == index1+1" :class="[item.isOccupied?'ac':'']" @click="choose(item.columnNum,item.rowNum,item,index3)" ref="changeClass">
                                      <!-- <b v-if="item[index].isBroken">{{set}}</b> -->
                                  </span>
                              </div>
                          </li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
      <div class="userorder" v-show="index >=1 ">
          <span class="phone">手机号:</span><span class="num">{{user}}</span><img src="@/assets/phonenum.png" alt="">
      </div>
      <div class="tobuy" v-if="index == 0">请先选座</div>
      <div class="tobuy" v-else>{{money}}元 确认选座 </div>
  </div>
</template>

<script>
import {getSeats, getSeatslist} from '@/api'
import '@/assets/all/iconfont.css'
export default {
    data() {
        return {
            sid:'',
            infoList:[],
            setList:[],
            seats:[],
            set:'',
            index:0,
            user:''
        }
    },
    computed:{
        money() {
            if(this.index > 5){
                alert('最多选择五张票')
                return 5*parseInt((((this.infoList.price && this.infoList.price.sale) + (this.infoList.price && this.infoList.price.premium))/100))
            }else{
            return this.index*parseInt((((this.infoList.price && this.infoList.price.sale) + (this.infoList.price && this.infoList.price.premium))/100))
            }
        }
    },
    created() {
        this.sid = this.$route.params.sid
        getSeats(this.sid).then((res) => {
            this.infoList = res.data.data.schedule
            console.log(res.data.data)
        })
        getSeatslist(this.sid).then((res) => {
            console.log(res.data.data)
            this.setList = res.data.data.seatingChart
        })
        this.user = JSON.parse(localStorage.getItem('user'))
    },
    methods:{
        go() {
            this.$router.go(-1)
        },
        rollSeat() {
            /* 获取当前页面的缩放比
            若未设置zoom缩放比，则为默认100%，即1，原图大小
                */
            var zoom = parseInt(this.$refs.bigSeat.style.zoom) || 100;
            /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
                    wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
                */
            zoom += event.wheelDelta / 12;
            // console.log(zoom)
            /* 最小范围 和 最大范围 的图片缩放尺度 */
            if (zoom >= 100 && zoom <150) {
                this.$refs.bigSeat.style.zoom = zoom + "%";
            }
            return false;
        },
        choose(columnNum,rowNum,item,index){
            if(item.isOccupied == true){
                alert('此座位已被选择')
                return
            }else{
                if(item.isBroken == false){
                    item.isBroken = true
                    this.$refs.changeClass[index].classList.add("mc")
                    this.index++
                    return
                }else{
                    this.$refs.changeClass[index].classList.remove("mc")
                    this.index--
                    // this.set = ''
                    item.isBroken = false
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .schedule{
        background-color: #f4f4f4;
        .header{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 44px;
            line-height: 44px;
            overflow: hidden;
            margin: 0;
            padding: 0;
            z-index: 3000;
            background-color: #fff;
            display: flex;
            .left{
                min-width: 15%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-left: 15px;
                img{
                    width: 20px;
                    height: 20px;
                }
            }
            .title{
                    text-align: center;
                    font-size: 17px;
                    color: #191a1b;
                    flex: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
            }
            .right{
                    width: 15%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 15px;
            }
        }
        .info{
            padding: 59px 15px 15px;
            background-color: #fff;
            .film-name{
                font-size: 15px;
                line-height: 21px;
                color: #191a1b;
            }
            .film-des{
                font-size: 13px;
                line-height: 19px;
                margin-top: 4px;
                color: #797d82;
            }
        }
        .setting-wrap{
            top: 118px;
            touch-action: none;
            width: 100%;
            height: calc(100vh - 45px - 118px);
            overflow-y: hidden;
            .setting-chart{
                min-height: 500px;
                min-width: 600px;
                position: relative;
                overflow: auto;
                .screen{
                    transform: scale(0.9375);
                    left: 97.7344px;
                    position: relative;
                    z-index: 2;
                    height: 20px;
                    min-width: 190px;
                    font-size: 11px;
                    line-height: 20px;
                    border-radius: 1px 1px 8px 8px;
                    text-align: center;
                    color: #fff;
                    background-color: #dbdbdb;
                    transform-origin: 0 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .set-y-num{
                    position: fixed;
                    width: 15px;
                    left: 10px;
                    top: 160px;
                    z-index: 2;
                    text-align: center;
                    background-color: #191a1b;
                    opacity: .2;
                    border-radius: 11.5px;
                    color: #fff;
                    transform-origin: 0 0;
                    .rownum{
                        width: 100%;
                        height: 25px;
                        margin: 2.5px 0;
                        display: inline-block;
                        margin: 2.5px 0px;
                        transform: scale(0.9375);
                    }
                }
                .set-wrap{
                    position: relative;
                    top: 25px;
                    left: 65px;
                    .set-item{
                        display: inline-block;
                        .row{
                            height: 30px;
                            .col{
                                float: left;
                                width: 20px;
                                height: 20px;
                                margin: 2.5px;
                                // background: black;
                                span{
                                    display: inline-block;
                                    // background: red;
                                    color: #6c6c6c;
                                    margin: 2.5px;
                                    width: 20px;
                                    height: 20px;
                                    &.ac{
                                        color: #ff5f16;
                                    }
                                    &.mc{
                                        color: yellowgreen;
                                    }
                                    b{
                                        font-size: 12px;
                                        width: 20px;
                                        height: 20px;
                                        display: inline-block;
                                        position: relative;
                                        top: -25px;
                                    }
                                }
                            } 
                        }
                    }
                }
            }
        }
        .userorder{
            height: 50px;
            width: 100%;
            padding: 15px;
            font-size: 13px;
            line-height: 18.5px;
            color: #191a1b;
            background-color: #fff;
            position: fixed;
            bottom: 45px;
            right: 0;
            left: 0;
            z-index: 2;
            span{
                font-size: 13px;
                line-height: 18.5px;
                color: #191a1b;
            }
            img{
                vertical-align: middle;
                margin-left: 5px;
                width: 13px;
                height: 13px;
            }
        }
        .tobuy{
            height: 45px;
            width: 100%;
            font-size: 15px;
            line-height: 21px;
            padding: 14px 0;
            text-align: center;
            background-color: #ff5f16;
            position: fixed;
            bottom: 0;
            right: 0;
            left: 0;
            color: #fff;
            z-index: 2;
        }
    }
</style>